<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form action="">
        姓名：<input type="text" name="username"><br>
        密码：<input type="text" name="password"><br>
        年龄：<input type="number" name="age"><br>
        分数：<input type="number" name="score"><br>
        <input type="button" value="提交" onclick="lookup()">
    </form>

    <script>
        var student = {
            toJSON() {
                return {
                    username: this.username,
                    password: this.password,
                    age: this.age,
                    score: this.score
                }
            }
        };
        function render(ele, stu) {
            var eles = ele.querySelectorAll('input[name]');
            eles.forEach(element => {
                Object.defineProperty(stu, element.name, {
                    get() {
                        return element.value;
                    },
                    set(val) {
                        element.value = val;
                    }
                });
            });
        }
        render(document.querySelector('form'), student);
        function lookup() {
            console.log(student);
            alert(JSON.stringify(student))
        }
    </script>
</body>

</html>